<!DOCTYPE html>
<html>

	<head>
		<title>图片懒加载</title>
		<meta charset="utf-8">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.warp {
				width: 1200px;
				margin: 50px auto 0;
			}
			ul,li {
				list-style: none;
			}
			
			li {
				width: 300px;
				height: 200px;
				border: 1px solid #ccc;
				margin-left: 400px;
				margin-bottom: 50px
			}
			li img {
				display: block;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div class="warp">
			<ul>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
				<li><img src="../img/zw/fff.png"/ data-src = "../img/zw/200.jpg"></li>
			</ul>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			load();
			$(window).on('scroll',function(){
				var timer = setTimeout(function(){
					load();
				},500)
			})
			function load(){
				$('img').each(function(){
					var $img = $(this);
					if($img.attr('isLoaded')){
						return;
					}
					var wh = $(window).height();
					var sh = $(window).scrollTop();
					var top = $img.offset().top;
					if(top<wh+sh){
						$img.attr('src',$img.attr('data-src'));
						$img.attr('isLoaded', true);
					}
				})
			}
		})
	</script>

</html>